Bootstrap是目前響應式及行動裝置網頁設計，最知名的框架，提供了包含HTML、CSS及JS等內容的框架。是前端應用工具，包含了
那最入門的是CSS框架，CSS代表了網頁的門面、設計感，是構成網頁的基本元素，應用Bootstrap則可以幫助開發者設計網頁時，以立即套用的功能，加速建構響應式內容，也可以提前處理一些跨瀏覽器可能產生的問題。
但也不一定要使用Bootstrap，CSS發展自今，設計上也越來越方便，Bootstrap只是提前幫各位做好一些工作，然而有時候做了太多工作，或者開發過程中不想要太多的束縛，就可以選擇不使用Bootstrap。
這邊也介紹一些Bootstrap的優點：
也由於Bootstrap全面性，累積了許多愛用者，社群資源也算蠻豐富的，幾乎大大小小的問題都可以找到相關ㄉ討論
目前最穩定的版本是 3.X
getbootstrap
下載之後解壓縮檔案，並更名為你的專案，接著，根據其Basic template開始，建立index.html，就可以開始，這個Basic template，建立了一個基本的html架構，並包含了ㄧ些基本設定，如viewport、stylesheet link等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
要注意!這邊有個重要的設定
<meta name="viewport" content="width=device-width, initial-scale=1">
是設定響應式的設計的啟端，，目的是將"內容的寬度參數" 等於 "設備的顯示寬度"，這樣在CSS裡面設定width:100%才會符合設備的顯示寬度，user-scalable=0 代表不允許，若沒特殊需求就維持這個設定吧，或是 user-scalable=1, maximum-scale=2.0，則代表允許手動放大，最多放大到2倍。
<link href="css/bootstrap.min.css" rel="stylesheet">
範例先引入min.css的內容，還有其他完整版css、theme.css、theme.min.css，如果只是為了設定響應式的格線
及一些簡單排版，例如navbar、jumbotron，則使用min.css就夠了，一般網頁則會依據需求同時引入好幾份文件，但是最基本的，就是min.css以及自己自訂的style.css這兩份。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
最下面是引用jquery的來源，之所以來源會包含"ajax.googleapis…"的原因，是因為jquery運作必須仰賴JavaScript引擎，這邊則是藉助了googleapis，比較有規模的則會在自己伺服器建引擎。
而開發時則下載 JavaScript，讓他在本地端運作，這樣測試起來比較快。
iThome鐵人賽
看影片追技術